import React from "react";
import axios from '../../../util/http';
import * as url from '../../../util/api'
import { Select, Input, Button, Table } from 'antd'
import {Link} from 'react-router-dom'
import './DiscountCoupon.css'
const { Option } = Select;
const { Search } = Input;
export default class DiscountCoupon extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Data: [],
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
    };
    this.columns = [
      {
        title: '名称',
        dataIndex: 'name',
      },
      {
        title: '类型',
        dataIndex: 'state',
      },
      {
        title: '价值（元）',
        dataIndex: 'money',
      },
      {
        title: '有效期',
        dataIndex: 'time',
      },
      {
        title: '使用门槛',
        dataIndex: 'door',
      },
      {
        title: '适用商品',
        dataIndex: 'product',
      },
      {
        title: '数量',
        dataIndex: 'num',
      },
      {
        title: '发放区域',
        dataIndex: 'address',
      },
    ];
    // for (let i = 0; i < 5; i++) {
    //   this.state.Data.push({
    //     key: i,
    //     name:'感恩大回馈',
    //     state: `满减券`,
    //     money: 50.00,
    //     time: `30天`,
    //     door:'满59可用',
    //     product:'所有商品',
    //     num:'每人限领两张',
    //     address:'全部',
    //   });
    // }
  }
  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };
  handleChange(value) {
    console.log(`selected ${value}`);
  }
  render() {
    let { Data, loading, selectedRowKeys } = this.state
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;
    return (
      <div>
        <div className={'search'}>
          <div className={'searchLeft'}>
            <Select defaultValue="全部状态" className={'Select1'} onChange={this.handleChange}>
              <Option value="全部状态">全部状态</Option>
              <Option value="未开始">未开始</Option>
              <Option value="促销中">促销中</Option>
              <Option value="已过期">已过期</Option>
              <Option value="已作废">已作废</Option>
            </Select>
            <Select defaultValue="全部类型" className={'Select4'} onChange={this.handleChange}>
              <Option value="全部类型">全部类型</Option>
              <Option value="新人券">新人券</Option>
              <Option value="满减券">满减券</Option>
              <Option value="客户券">客户券</Option>
              <Option value="商品券">商品券</Option>
            </Select>
            <div className={'searchRight'}>
              <Search
                placeholder="请输入优惠券名称"
                onSearch={value => console.log(value)}
                style={{ width: 400 }}
              />
            </div>
          </div>
          <div>
          <span>最多支持100条优惠券活动同时生效</span>
            <Link to="/homepage/newdiscountcoupon">
            <Button className={'button'} style={{ backgroundColor: '#4BD0B6', border: '#4BD0B6' }} type="primary">新增</Button>
          </Link>
          </div>
          
          
        </div>
        <div className={'table'}>
          <div style={{ marginBottom: 16 }}>
            <Button type="primary" onClick={this.start} disabled={!hasSelected} loading={loading}>
              Reload
          </Button>
            <span style={{ marginLeft: 8 }}>
              {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
            </span>
          </div>
          <Table rowSelection={rowSelection} columns={this.columns} dataSource={Data} />
        </div>
      </div>
    );
  }
  componentDidMount() {
    axios({
      url: url.PostYhqData,
      method: 'post'
    }).then(res => {
      console.log(res.data.data)
      let data = res.data.data.filter((item) => {
        item.key = item.id
        delete item.id
        return item
      })
      this.setState({
        Data:data
      })
    })
  }
}

